<template>
  <view class="add-container">
	  <uni-forms ref="form" :value="record" :rules="rules"  labelWidth="80px" label-position="top">
	    <uni-forms-item name="custName" label="客户姓名" required>
	        <uni-easyinput placeholder="请输入客户姓名" v-model="record.custName" />
	    </uni-forms-item>
		<uni-row class="demo-uni-row row-title">
			<uni-col :span="4">添加项目</uni-col>
			<uni-col :span="4"><button type="default" class="but-add" @click="addProject">添加</button></uni-col>
		</uni-row>
		<uni-row class="demo-uni-row row-config" v-for="(item,index) in chooses">
			<uni-col :span="10">
				<uni-data-select
				       v-model="item.categoryId"
				       :localdata="categoryTree"
					   placeholder="请选择项目分类"
				       @change="cateChangeClick(item)"
				     ></uni-data-select>
				
			</uni-col>
			<uni-col :span="11">
				<uni-data-select :localdata="item.configList" @change="configChange(item)"   
				v-model="item.configId"  placeholder="请选择项目"></uni-data-select>
			</uni-col>
			<uni-col :span="3">
				<button type="default" class="but-remove" @click="removeProject(index)" v-if="index !=0">删除</button>
			</uni-col>
		</uni-row>
	   <uni-forms-item name="totalAmount" label="项目金额">
	       <uni-easyinput placeholder="请输入项目金额" disabled   v-model="record.totalAmount"/>
	   </uni-forms-item>
	   <uni-forms-item name="discountAmount" label="优惠金额">
	       <uni-easyinput placeholder="请输入优惠金额" type="number" @change="calcPrice" v-model="record.discountAmount" />
	   </uni-forms-item>
	   <uni-card class="inpt_card" title="收费信息">
		   <uni-forms-item class="inpt_price" name="totalCashAmount" label="现金收费">
			   <uni-easyinput placeholder="请输入现金收费"  v-model="record.totalCashAmount" />
		   </uni-forms-item>
		   <uni-forms-item class="inpt_price" name="totalCardAmount" label="电子收费">
			   <uni-easyinput placeholder="请输入电子收费"  v-model="record.totalCardAmount" />
		   </uni-forms-item>
		</uni-card>
		<uni-forms-item name="cardRemark" label="流水号">
			<uni-easyinput placeholder="请输入流水号" v-model="record.cardRemark" />
		</uni-forms-item>
	   <uni-forms-item name="recordRemark" label="备注">
		   <uni-easyinput placeholder="请输入备注" v-model="record.recordRemark" />
	   </uni-forms-item>
	    <button type="primary" @click="submit">提交</button>
	  </uni-forms>
  </view>
</template>

<script>
  import { categoryTree,findByCateId,saveRecord,findDetail,moidfyRecord } from "@/api/record/record"

  export default {
    data() {
      return {
        record: {
			iidd:null,
			custName:null,
			categoryId:null,
			configId:null,
			discountAmount:null,
			totalCashAmount:null,
			totalCardAmount:null,
			tipsCardAmount:null,
			recordRemark:null
		},
		hasAdd:true,
		modifyCount:0,
		chooses:[{
			  categoryId:null,
			  configId:null,
			  configList:[],
			  configAmount:0
		  }],
        categoryTree: [],
        projectConfigs: [],
		rules: {
		  custName: {
		    rules: [{
		      required: true,
		      errorMessage: '客户名称必须填写'
		    }]
		  },
		  categoryId: {
		    rules: [{
		        required: true,
		        errorMessage: '项目分类必须选择',
		      }
		    ]
		  },
		  configId: {
		    rules: [{
		        required: true,
		        errorMessage: '项目必须选择'
		      }
		    ]
		  }
		},
	 }
    },
    onLoad(e) {
      this.getCategoryTree();
	  if(e.id !=undefined){
		  let id = e.id;
		  this.findDetail(id);
	  }
    },
    methods: {
	  findDetail(id){
		  this.hasAdd = false;
		  let params ={id:id};
		  let _this = this;
		  this.modifyCount =0;
		  let len =0;
		  findDetail(params).then(res=>{
			  this.record = res;
			  let choosesList = [];
			  res.projects.forEach((item)=>{
				  _this.cateChangeClick(item);
				  choosesList.push(item);
				  len +=1;
			  });
			  console.log("11111111");
			  let time = setInterval(()=>{
				  console.log("bbbbbbbbb");
				  if(_this.modifyCount >= len  ){
					  _this.chooses = choosesList;
					  clearInterval(time);
				  }
				  
			  },100)
			 
		  })
	  },
      getCategoryTree() {
        categoryTree().then(res => {
			this.categoryTree = res;
        })
      },
	  getByCateId(item) {
	    findByCateId(item.categoryId).then(res => {
	  		item.configList = res;
			this.modifyCount +=1;
	    })
	  },
	  calcPrice(){
		  this.record.totalAmount = 0;
		  this.chooses.forEach((choose)=>{
		  			 this.record.totalAmount += choose.configAmount;
		  })
		  let discountAmount = parseFloat(this.record.discountAmount);
		if(this.record.totalAmount>0){
			this.record.realAmount=this.record.totalAmount - this.record.discountAmount;
		}
	  },
	  configChange(item){
		  let _this = this;
		  if(item.configId != null && item.configId!=''){
			  item.configList.forEach((v,k)=>{
				  if(v.id == item.configId){
					  item.configAmount = v.projectAmount;
				  }
			  })
		  }else{
			  item.configAmount =0;
		  }
		 this.calcPrice();
	  },
	  cateChangeClick(item){
		  if(item.categoryId == null || item.categoryId==""){
			  item.configList =[];
			  item.configId= null;
			  item.configAmount =0;
			  this.calcPrice();
		  }else{
			  this.getByCateId(item);
		  }
		
	  },
	  addProject(){
		  this.chooses.push({
			  categoryId:null,
			  configId:null,
			  configList:[],
			  configAmount:0
		  });
	  },
	  removeProject(index){
		this.chooses.splice(index,1);
		this.calcPrice();
	  },
	  submit() {
	  	let _this = this;
	    if(this.record.custName ==undefined || this.record.custName==''){
			 this.$modal.alert("请填写客户姓名")
			 return;
		}
		this.record.projects =[];
		for(var index in this.chooses){
			let item = this.chooses[index];
			let project ={categoryId:item.categoryId,configId:item.configId};
			if(item.categoryId == null || item.categoryId == '' || item.configId == null || item.configId ==''){
				 this.$modal.alert("第"+(parseInt(index)+1)+"行的项目信息未填写完成");
				  return;
			}
			this.record.projects.push(project);
		}
	
		let totalAmount = this.record.totalAmount != null?this.record.totalAmount:0;
		let totalCashAmount = this.record.totalCashAmount != null?this.record.totalCashAmount:0;
		let totalCardAmount = this.record.totalCardAmount != null?this.record.totalCardAmount:0;
		let discountAmount = this.record.discountAmount != null?this.record.discountAmount:0;
	
		if(totalCardAmount && (this.record.cardRemark == null || this.record.cardRemark =='')){
			this.$modal.alert("有电子金额，则流水号必须填写");
			return;
		}
		
		
		if(this.hasAdd){
			saveRecord(this.record).then(res=>{
				this.$modal.sucessTip("保存成功",function(){
					uni.reLaunch({
						url: '/pages/index'
					});
				});
				
			})
		}else{
			moidfyRecord(this.record).then(res=>{
				this.$modal.sucessTip("修改成功",function(){
					uni.reLaunch({
						url: '/pages/index'
					});
				});
				
			})
		}
	  }
    }
  }
</script>

<style lang="scss">
  page {
     background-color: #ffffff;
  }
  .add-container {
	background-color: #ffffff;
    padding-top: 36rpx;
    padding: 15px;
  }
  .line-style{
	padding: 20rpx 0;
  }
  .inpt_card{
	margin:0px !important;
	padding: 0px !important;
  }
  .inpt_price{
	width: 48%;
	display: inline-block;
	margin: 2px;
  }
  .but-add{
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	display: inline-flex;
  }
  .but-remove{
	font-size: 14px;
	line-height: 20px;
	display: inline-flex;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 8px;
	padding-bottom: 8px;
  }
  .row-title{
	  margin-bottom: 10px;
  }
  .row-config{
  	  margin-bottom: 5px;
  }
</style>
